<template>
    <div class="reply-item">
        <div class="main-body">
            <div class="reviewer-info">
                <simple-user-info :user="reply.reviewer"></simple-user-info>
            </div>
            <div class="content" v-html="reply.content"></div>
        </div>
        <div class="footer-operate">
            <div class="operate">
                <div class="like-menu">
                    <circle-menu
                        type="middle-around"
                        :number="6"
                        :show="vote(reply.id)?vote(reply.id).type:0"
                        @vote="addVote"
                        @removeVote="removeVote"
                        animate="animated flip"
                        circle>
                        <icon-font slot="item_btn" class="icon-font" href="#cepingjiaxing"></icon-font>
                        <icon-font slot="item_1" class="icon-font" href="#cechaping"></icon-font>
                        <icon-font slot="item_2" class="icon-font" href="#ceshui"></icon-font>
                        <icon-font slot="item_3" class="icon-font" href="#cejianyi"></icon-font>
                        <icon-font slot="item_4" class="icon-font" href="#cegonglve"></icon-font>
                        <icon-font slot="item_5" class="icon-font" href="#cezan1"></icon-font>
                        <icon-font slot="item_6" class="icon-font" href="#cetucao"></icon-font>
                    </circle-menu>
                </div>
                <div class="text">
                <span class="text-item">
                    {{replyTime}}
                </span>
                    <a class="text-item" @click="showStorey=!showStorey">回复</a>
                    <a class="text-item delete" v-if="management" @click="deleteReply">删除</a>
                </div>
            </div>
        </div>
        <transition enter-active-class="bounceInRight" leave-active-class="bounceOutRight"
                    :duration="{enter:500,leave:500}">
            <div class="footer-storey animated" v-if="showStorey">
                <storey @listStorey="listStorey" @replyStorey="replyStorey"
                        :storeys="reply.storeys"></storey>
            </div>
        </transition>
    </div>
</template>

<script>
    import SimpleUserInfo from '@/components/user/SimpleUserInfo'
    import CircleMenu from '@/components/CircleMenu'
    import Storey from '@/components/postReply/Storey'
    import { mapGetters, mapActions } from 'vuex'
    import { convertTime } from '@/utils/date'

    export default {
        name: 'replyItem',
        components: {
            SimpleUserInfo,
            CircleMenu,
            Storey
        },
        props: {
            reply: {
                type: Object,
                required: true
            },
            management: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        data () {
            return {
                showStorey: true
            }
        },
        mounted () {
            if (this.getUser) {
                this.action(this.currentVotesAction())
            }
        },
        computed: {
            ...mapGetters({
                vote: 'reply/vote',
                getUser: 'user/getUser'
            }),
            replyTime () {
                return convertTime(this.reply.replyTime)
            }
        },
        methods: {
            ...mapActions({
                replyStoreyAction: 'storey/replyStorey',
                currentVotesAction: 'reply/currentVotes',
                deleteReplyAction: 'reply/deleteReply',
                voteAction: 'reply/vote',
                removeVoteAction: 'reply/removeVote'
            }),
            addVote (type) {
                this.action(this.voteAction({ id: this.reply.id, type }), data => {
                    this.$message.success('投票成功')
                    this.$emit('reloadReply')
                    this.action(this.currentVotesAction())
                })
            },
            removeVote () {
                this.action(this.removeVoteAction(this.reply.id), data => {
                    this.$message.success('取消投票成功')
                    this.$emit('reloadReply')
                    this.action(this.currentVotesAction())
                })
            },
            deleteReply () {
                this.action(this.deleteReplyAction(this.reply.id), data => {
                    this.$message.success('删除成功')
                    this.$emit('reloadReply')
                })
            },
            listStorey () {
                this.$emit('listStorey')
            },
            replyStorey (content) {
                this.action(this.replyStoreyAction({ replyId: this.reply.id, content }), data => {
                    this.$message.success('回复成功')
                    this.$emit('listStorey')
                })
            }
        }
    }
</script>

<style lang="less" scoped>

    .reply-item {
        width: 100%;
        margin: 48px 0;
        border-bottom: #9d9d9d 1px solid;

        .main-body {
            display: -webkit-inline-flex;
            margin-top: 16px;
            width: 100%;

            .reviewer-info {
                display: inline-block;
                height: 100%;
                float: left;
            }

            .content {
                margin: 32px 32px;
                text-align: left;

                /deep/ img {
                    width: 100%;
                }
            }
        }

        .footer-operate {
            width: 100%;
            margin-bottom: 16px;

            .operate {
                width: 100%;
                height: 50px;

                .like-menu {
                    display: inline-block;
                    height: 100%;
                    width: 65%;
                    float: left;

                    .icon-font {
                        width: 60%;
                        height: 60%;
                    }
                }

                .text {
                    height: 100%;
                    width: 30%;
                    font-size: 16px;
                    line-height: 50px;
                    float: right;

                    .text-item {
                        margin: 0 8px;
                    }

                    .delete {
                        color: #ff0000;
                    }

                    a {
                        text-decoration: none;
                        cursor: pointer;
                        color: #5095ff;
                    }

                    a:link {
                        color: #5095ff;
                    }

                    a:visited {
                        color: #5095ff;
                    }

                    a:hover {
                        color: rgba(255, 151, 60, 0.8);
                    }

                    a:active {
                        color: rgba(255, 86, 25, 0.8);
                    }
                }
            }
        }

        .footer-storey {
            margin: 0 0 16px auto;
            width: 60%;
        }
    }
</style>
